<template>
  <MrCustom bg-color="bg-gradual-blue" is-back/>

  <view class="flex justify-center" v-if="archiveInfo">
    <view class="overturn-box radius-lg" :style="styleA">

      <view class="flex flex-sub flex-direction align-center" style="margin-top: 10vh">
        <view class="cuIcon-expressman  text-xxl  text-blue " style="font-size: 40px"></view>
        <view>请设置您的升提高体重</view>
        <view>用来计算胖瘦情况</view>
      </view>
      <view class="flex bg-white margin-lr radius-lg padding flex-sub flex-direction align-center"
            style="margin-top: 10vh">
        <view class="flex justify-between solid-bottom padding-tb">
          <view>身高</view>
          <view class="flex flex-sub padding-lr">
            <input placeholder="请输入身高" v-model="archiveInfo.height">
          </view>
          <view class="text-bold">CM</view>
        </view>
        <view class="flex justify-between solid-bottom padding-tb">
          <view>体重</view>
          <view class="flex flex-sub padding-lr">
            <input placeholder="请输入体重" v-model="archiveInfo.weight">
          </view>
          <view class="text-bold">KG</view>
        </view>
      </view>
      <view style="margin-top: 5vh">
        <view class="text-center text-gray text-df">
          您填写的信息资料将存储在平台供你本人使用
        </view>
      </view>
      <view class=" flex flex-sub flex-direction margin">
        <button class="cu-btn lg bg-blue" @click="submit">确定</button>
      </view>
    </view>
    <view class="overturn-box cu-b2 radius-lg" :style="styleB">
      <view class="flex solid-bottom margin-top justify-center">
        <view class="cu-coupon-box radius-lg padding-sm">
          <view class="flex justify-between">
            <view class="text-white text-xxl text-bold">BMI</view>
            <view class="cu-tag line-white round text-xxl padding-lr-sm">
              {{ BMIStatus }}
            </view>
          </view>
          <view class="flex justify-center align-end padding-tb cu-coupon-content text-white">
            <text class="text-sl"> {{ BMI }}
            </text>
          </view>
          <view class="flex justify-around align-center margin-top-xl text-white">
            <view class="text-center">
              <view>{{ archiveInfo.weight }}KG</view>
              <view>体重</view>
            </view>
            <view class="text-center">
              <view>{{ archiveInfo.height }}CM</view>
              <view>身高</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bg-white margin-top padding radius-lg">
        <view class="solid-bottom padding-bottom">
          <view v-for="(item,index) in BMIStatusList" :key="index">
            <view class="flex flex-sub justify-between align-center padding-xs"
                  :class="BMI>item.low&&BMI<item.high?'bg-blue light':''">
              <view v-if="BMI>item.low&&BMI<item.high" class="cuIcon-playfill"></view>
              <view class="flex flex-sub padding-left">{{ item.label }}</view>
              <view> {{ item.value }}</view>
            </view>
          </view>
        </view>
        <view class="flex flex-sub justify-between padding text-black">
          <view>正常体重(KG)</view>
          <view class="text-bold">{{ getNormalWeight(archiveInfo.height, BMI) }}</view>
        </view>
      </view>
      <view class=" flex flex-sub flex-direction margin">
        <button class="cu-btn lg bg-blue" @click="reset">记录新的体重指数</button>
      </view>
    </view>
  </view>

</template>

<script setup lang="ts">

import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";
import api from "@/api";

const archiveInfo = ref()
const isEdit = ref(true)
const BMI = ref()
const BMIStatus = ref()
const styleA = ref('transform:rotateY(0deg)')
const styleB = ref('transform:rotateY(-180deg)')
const BMIStatusList = ref([
  {
    low: 0,
    high: 18.5,
    label: '体重过低',
    value: '< 18.5',
  },
  {
    low: 18.5,
    high: 23.9,
    label: '体重正常',
    value: '18.5-23.9',
  },
  {
    low: 24.0,
    high: 27.9,
    label: '超重',
    value: '24.0-27.9',
  },
  {
    low: 28.0,
    high: 999,
    label: '肥胖',
    value: '≧ 28',
  }
])
onLoad((option) => {
  archiveInfo.value = JSON.parse(decodeURIComponent(option.archiveInfo))
  if (archiveInfo.value.weight) {
    isEdit.value = false
    BMI.value = getBMI(archiveInfo.value.weight, archiveInfo.value.height)
    BMIStatus.value = getBMIStatus(getBMI(archiveInfo.value.weight, archiveInfo.value.height))
    styleA.value = 'transform:rotateY(180deg)'
    styleB.value = 'transform:rotateY(0deg)'
  }
})
const showA = () => {
  console.log('A')
  styleA.value = 'transform:rotateY(180deg)'
  styleB.value = 'transform:rotateY(0deg)'
}
const showB = () => {
  console.log('B')
  styleA.value = 'transform:rotateY(0deg)'
  styleB.value = 'transform:rotateY(-180deg)'

}

const getBMI = (weight: any, height: any) => {
  return (weight / (height * height) * 10000).toFixed(1)
}
const getBMIStatus = (value: any) => {
  if (value < 18.5) {
    return "过低"
  } else if (value < 23.9) {
    return "正常"
  } else if (value < 27.9) {
    return "超重"
  } else {
    return "肥胖"
  }
}
const getNormalWeight = (height: any, BMI: any) => {
  let low = (height * height / 10000 * 18.5).toFixed(1)
  let high = (height * height / 10000 * 23.9).toFixed(1)
  return low + ' - ' + high

}

const submit = () => {
  api.archive.setHeightWeight({
    id: archiveInfo.value.id,
    weight: archiveInfo.value.weight,
    height: archiveInfo.value.height,
  }).then(res => {
    if (res && res.data.code === 0) {
      isEdit.value = false
      BMI.value = getBMI(archiveInfo.value.weight, archiveInfo.value.height)
      BMIStatus.value = getBMIStatus(getBMI(archiveInfo.value.weight, archiveInfo.value.height))
      showA()
      uni.showToast({
        title: res.data.msg
      })
    }
  })
}
const reset = () => {
  isEdit.value = true
  showB()

}
</script>

<style scoped>
.overturn-box {
  position: absolute;
  width: 100%;
  height: 90%;
  transition: all 1s;
  backface-visibility: hidden;
  overflow: hidden;
}
</style>